<template>
  <el-form
    :model="form"
    label-width="120px"
    @submit.prevent="submit"
    class="grid-form  animate__animated animate__lightSpeedInRight"
  >
    <el-form-item label="姓名">
      <el-input size="large" v-model="form.name" />
    </el-form-item>

    <el-form-item label="单位">
      <el-input size="large" v-model="form.company" />
    </el-form-item>

    <el-form-item label="电话">
      <el-input size="large" v-model="form.phone" />
    </el-form-item>

    <el-form-item label="邮箱">
      <el-input size="large" v-model="form.email">
      <template #append>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="@qq.com" value="@qq.com" />
          <el-option label="@163.com" value="@163.com" />
        </el-select>
      </template>
      </el-input>
    </el-form-item>
    
    <el-form-item label="产品类型">
      <el-select
        size="large"
        v-model="form.productType"
        placeholder="请选择"
      >
        <el-option
          v-for="item in products"
          :key="item.pro_id"
          :label="item.pro_name"
          :value="item.pro_name"
        />
      </el-select>
    </el-form-item>

    <el-form-item
      label="预约时间"
      prop="pro_time"
    >
      <el-date-picker
        v-model="form.time"
        type="datetime"
        size="large"
        placeholder="选择日期"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item>
      <el-button style="width: 180px; height: 60px; font-size: 20px; "
        type="primary"
        native-type="submit"
        round="true"
      >提交预约申请</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      form: {
        name: "",
        company: "",
        phone: "",
        email: "",
        productType: '',
        time:new Date(),
        type: "afterSale",
      },
      products: [],
      select:""
    };
  },
  mounted() {
    this.loadProducts();
  },
  methods: {
    async submit() {
      console.log("提交表单", this.form);
      const upForm = {
        appointment_user:this.form.name,
        appointment_time:this.form.time,
        appointment_company:this.form.company,
        phone_num:this.form.phone,
        email:this.form.email+this.select,
        product_type:this.form.productType
      }
      console.log("提交",upForm)
      try{
        const res = await this.$axios.post('http://47.108.80.35:6060/appointment/make_appointment',upForm)
        console.log(res)
        if(res.data.code === 200){
          ElMessage.success('预约成功,我们将主动联系您')
        }else{
          ElMessage.error(res.data.msg)
        }
      }catch(err){
        ElMessage.error('预约失败,请检查输入信息')
        console.log("报错信息：",err)
      }
    },
    async loadProducts() {
      try{
        
        const res = await axios.get('http://47.108.80.35:6060/company_req_product/get_product');
        if (res.data.code === 200) {
          this.products = res.data.data;
        }
      }catch(err){
        ElMessage.error("产品列表请求失败")
      }
    },
  },
};
</script>

<style>
.grid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.center-button {
  text-align: center;
  grid-column: span 2;
}

.center-button .el-button {
  border-radius: 10px;
}

</style>